<template>
  <div class="list">
    <header>样品编辑</header>
    <el-form :model="lb" :rules="rules" ref="lb" label-width="80px">
      <el-row>
        <el-col :xs="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="名字" prop="name">
            <el-input v-model="lb.name" style="width: 202px" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="产品编码" prop="product_id">
            <el-input v-model="lb.product_id" style="width: 202px" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="辅药名称" prop="product_name">
            <el-input v-model="lb.product_name" style="width: 202px" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="产地" prop="place">
            <el-input v-model="lb.place" style="width: 202px" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="品牌" prop="brand">
            <el-input v-model="lb.brand" style="width: 202px" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="类型" prop="type">
            <el-select v-model="lb.type" placeholder="请选择类型">
              <el-option label="中药" value="中药"></el-option>
              <el-option label="西药" value="西药"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="品级" prop="level">
            <el-select v-model="lb.level" placeholder="请选择品级">
              <el-option label="AA" value="AA"></el-option>
              <el-option label="AB" value="AB"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="单位" prop="unit">
            <el-select v-model="lb.unit" placeholder="请选择单位">
              <el-option label="个" value="个"></el-option>
              <el-option label="盒" value="盒"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="数量" prop="count">
            <el-input v-model="lb.count" style="width: 202px" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="成本" prop="pure_price">
            <el-input v-model="lb.pure_price" style="width: 202px" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="售价" prop="prioe">
            <el-input v-model="lb.prioe" style="width: 202px" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="优惠金额" prop="discount">
            <el-input v-model="lb.discount" style="width: 202px" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="限购数量" prop="limit">
            <el-input v-model="lb.limit" style="width: 202px" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="上架时间" prop="sale_stime">
            <el-date-picker
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
              v-model="lb.sale_stime"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="下架时间" prop="sale_etime">
            <el-date-picker
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              v-model="lb.sale_etime"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :md="12" :lg="8" :xl="6">
          <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">上传barner图，<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-col>
        <el-col :xs="24" :md="12" :lg="8" :xl="6">
          <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">上传详情图，<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :md="12" :lg="8" :xl="6">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="备注"
            v-model="lb.remark"
          >
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :md="12" :lg="8" :xl="6">
        <el-form-item>
          <el-button type="primary" @click="tijiao()">创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { presentAddApi } from '../../../apis/samplApi'
export default {
  data () {
    return {
      lb: {
        name: '', // 样品名
        product_id: '', // 编码
        product_name: '', // 辅料名字
        sale_stime: '', // 上架时间
        sale_etime: '', // 下架时间
        type: '', // 产品类型
        unit: '', // 单位
        level: '', // 品级
        place: '', // 产地
        brand: '', // 品牌
        detail: '', // 详情图片
        banner: '', // banner图片
        remark: '', // 备注
        count: '', // 数量
        pure_price: '', // 成本
        prioe: '', // 售价
        discount: '', // 优惠
        limit: '' // 限购数量
      },
      lista: {},
      panduan: false,
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        product_id: [
          { required: true, message: '请输入编码', trigger: 'blur' }
        ],
        product_name: [
          { required: true, message: '请输入辅药名字', trigger: 'blur' }
        ],
        place: [{ required: true, message: '请输入产地名称', trigger: 'blur' }],
        brand: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
        count: [{ message: '请输入数量', trigger: 'blur' }],
        pure_price: [{ message: '请输入成本', trigger: 'blur' }],
        prioe: [{ message: '请输入售价', trigger: 'blur' }],
        discount: [{ message: '请输入优惠金额', trigger: 'blur' }],
        limit: [{ message: '请输入限购数量', trigger: 'blur' }]

      },
      name: ''
    }
  },
  created () {
    const name = this.$route.query.row
    this.lb = { ...this.lb, ...name }
  },
  methods: {
    async tijiao () {
      console.log(this.lb)
      const result = await presentAddApi(this.lb)
      if (result.code === 200) {
        this.$message({
          message: '✔成功',
          type: 'success'
        })
      } else {
        this.$message({
          message: '×失败',
          type: 'warning'
        })
      }
      this.lb = ''
    }
  }
}
</script>

<style lang="less" scoped>
.list {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 10px;
  header {
    margin: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #838383;
  }
  .el-row {
    margin-top: 20px;
  }
}
</style>
